<%@ page contentType="text/html;charset=utf-8" language="java"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <title>事项中心</title>
  <link rel="stylesheet" href="<c:url value="/resource/wechat/css/frozen.css"></c:url>">
  <link rel="stylesheet" type="text/css" href="<c:url value="/resource/wechat/css/main.css"></c:url>" />
  <style type="text/css">
    .ui-list-pure a{color: #000;}
    .sslk_more {
      width: 98%;
      float: left;
      margin-left: 1%;
      height: 35px;
      line-height: 35px;
      color: #fff;
      text-align: center;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 3px;
      clear: both;
      margin-top: 15px;
      margin-bottom: 15px;
      font-family: "微软雅黑", "黑体", "宋体";
      font-size: 1.0rem;
    }
    .sslk_more a {
      color: #fff;
      text-decoration: none;
    }
    #pr_list_foot {
      margin: 0;
      padding: 0;
      height: 3rem;
      line-height: 3rem;
      width: 100%;
      border: none;
      text-align: center;
      -webkit-font-smoothing: antialiased;
      font-size: 0.95rem;
      color: #aba0a0;
    }
    .tc2{
      line-height: 30px;
      background: white;
      margin-top: 50%;
      width: 85%;
      margin-left:10%;
      height:130px;
      border-radius: 10px;
    }
    .tc3{
      float:left;
      margin:0px  10px;
    }
    .tc{

      width:100%;
      height: 100%;
      background: rgba(0,0,0,0.4);
      display: block;
      z-index: 1;
      position:fixed;
      top: 0px;
      left:0px;
    }
    #pr_list_foot a {
      display: block;
      height: 3rem;
      width: 7.5rem;
      margin: 0 auto;
      padding: 0;
      text-align: center;
      font-weight: normal;
      text-decoration: none;
      color: #aba0a0;
    }
  </style>
</head>

<body class="bg_fff" ontouchstart>

<%--<div class="tc" onclick="tcnone()"><div class="tc2"><h1 align="center">温馨提示：</h1><div class="tc3"><img src="<c:url value="/resource/images/app_logo.png"/>" width="70px" height="70px"/></div><div>请您先选择"辖区"确定您要办理业务所在的分县局。再选择"警种"。即可办理相关事项。</div></div> </div>--%>
<section class="ui-container">
  <ul class="gslk">
    <li class="act width25" id="orgName">市局</li>
    <li class="act width25" id="jz" >警种</li>
    <li class="act width25" id="caseType">分类</li>
    <li class="act width25" id="kw">筛选</li>
  </ul>
  <ul class="gslk_main width33" id="org1">
    <li class="updown"></li>
  </ul>
  <ul class="gslk_main2" id="org2">

  </ul>

  <ul class="gslk_main" id="catalogs">
    <li class="updown"></li>
  </ul>
  <ul class="gslk_main">
    <li onclick="changeCaseType('',this)">全部</li>
    <li onclick="changeCaseType('2',this)">个人</li>
    <li onclick="changeCaseType('1',this)">企业</li>
    <li class="updown"></li>
  </ul>
  <div class="gslk_main">
    <div class="sxzx_wrap">
      <div class="sxzx_main">
        <div class="sxzx_main_rt">
          <input type="button" value="确定" id="sxzx_but" />
        </div>
        <div class="sxzx_main_lf">
          <input type="text" placeholder="请输入事项关键字" id="keywords" />
        </div>
      </div>
    </div>
    <div style="clear: both"></div>
    <div class="updown" style=" border-bottom: 1px solid #dcdcdc;width: 100%; height: 10px; background: url(<c:url value="/resource/wechat/images/sliderup.png" />) no-repeat center center; background-size: 20px;"></div>
  </div>
  <div style="clear: both;"></div>
  <ul class="ui-list ui-list-pure ui-list-link ui-border-b" id="content">
    <c:forEach items="${pager.list}" var="caseListEnt">
      <li class="ui-border-t" onclick="gotoDetail('${caseListEnt.caseNo}','${caseListEnt.orgId}','${caseListEnt.expertneturl==null?"":caseListEnt.expertneturl}')">
        <h4>${caseListEnt.caseName}</h4>
        <p><span>受理单位:${caseListEnt.caseDetpName}</span></p>
      </li>
    </c:forEach>
  </ul>
  <form style="display: none" action="<c:url value='/api/case/detail' />" method="post" id="formDetail">
    <input name="caseNo" id="caseNo">
    <%--<input name="orgid" id="orgId">--%>
    <%--<input value="${userGuid}" name="userGuid">--%>
    <%--<input value="${openId}" name="openId">--%>
    <%--<input name="expertneturl" id="expertneturl">--%>
    <%--<input name="pt" id="pt" value="W">&lt;%&ndash;微信端进去事项详情&ndash;%&gt;--%>
  </form>

  <div id="pr_list_foot"><a class="foot_icon" onclick="more(this);" href="javascript:void(0)" id="moreButton">加载更多</a></div>
</section>
</body>
<script src="<c:url value='/resource/js/jquery-2.0.min.js'/>"></script>
<script src="<c:url value='/resource/wechat/js/zepto.min.js'/>"></script>
<script type="text/javascript">

  function tcnone(){
    $(".tc").css("display","none");
  }
  function gotoDetail(caseNo,orgId,expertneturl){
    $("#caseNo").val(caseNo);
    $("#orgId").val(orgId);
    $("#expertneturl").val(expertneturl);
    $("#formDetail").submit();
  }

  var policeCatalogs = "";
  var caseType = "";
  var keywords = "";
  var currentPage = 0;
  var orgId = "";
  var orgName = "全部";
  var parentOrgId = "";
  var _parentOrgId = "";
  var parentOrgName = "全部";

  $(function(){

    if('${keyword}' != ''){
      keywords = '${keyword}';
      $('#keywords').val('${keyword}');
    loadMores(1,0);
    }

    currentPage = 1;
    $(".gslk .act").click(function(){
      $(this).addClass("hov").siblings().removeClass("hov");
      var i=$(this).index();
      if($(".gslk_main").eq(i).css("display") == "block"){
        $(".gslk_main").eq(i).slideUp().siblings(".gslk_main").hide();
        $(".gslk_main2").hide();

        $(this).removeClass("hov");
      }else {
        $(".gslk_main").eq(i).slideDown().siblings(".gslk_main").hide();
        $(".gslk_main2").hide();

      }
    })




    $(".updown").click(function(){
      $("#org1").slideUp();
      $("#org2").slideUp();
      $(".gslk_main").slideUp();
    });

  })

  $("#sxzx_but").click(function(){
      $(this).parents(".gslk_main").slideUp();
      keywords = $("#keywords").val();
      loadMores(1,0);
  })

  function toHide(){
    $("#org1").slideUp();
    $("#org2").slideUp();
  }

  function changeCaseType(index,obj){
    caseType = index;
    $(obj).parent(".gslk_main").slideUp();
    $(".gslk > .act").removeClass("hov");
    $("#caseType").html($(obj).html());
  loadMores(1,0);
  }

  function changePoliceCatalogs(index,obj){
    policeCatalogs = index;
    $(obj).parent(".gslk_main").slideUp();
    $(".gslk > .act").removeClass("hov");
    var title = $(obj).html();
    if(title.length > 2){
      $("#jz").html($(obj).html().substring(0,2)+"...");
    }else {
      $("#jz").html($(obj).html());
    }
  loadMores(1,0);
  }


  $.ajax({
    url : "<c:url value='/api/query/police-catalogs'/>",
    type : "get",
    dataType : "json",
    success : function(resp){
      if(resp&&resp.succ){
        var _data = resp.data,_length = _data.length;
        var _html = "<li onclick=changePoliceCatalogs('',this)>全部</li>";
        for(var i=0;i<_length;i++){
          var _item = _data[i];
          _html += "<li onclick=changePoliceCatalogs('"+ _item.id +"',this)>" + _item.value + "</li>";
        }
        $("#catalogs").prepend(_html);
      }
    }
  });

    $.ajax({
      url : "<c:url value='/api/Org/orglist/230600000000'/>",
      type : "get",
      dataType : "json",
      success : function(resp){
        if(resp&&resp.succ){
          var _data = resp.data;
          var _html = "<li onclick='changeOrgId(230600000000"+",this,2)'>市局</li>";

            for(var i=0;i<_data.length;i++){
            var _item = _data[i];
            _html += "<li onclick=changeOrgId('"+ _item.deptId +"',this,2)>" + _item.deptName + "</li>"
          }
          $("#org1").prepend(_html);
        }
      }
    });

  function changeOrgId(index,obj,lindex) {

      if ($(obj).html() != "市局") {
          orgId = index;
      }
      if ($(obj).html() == "市局" && lindex == 1) {
          $("#org1").slideUp();
          $("#org2").slideUp();
          orgName = "全部";
//
          orgId = "";
          $(".gslk > .act").removeClass("hov");
        loadMores(1, 0);
      } else if ($(obj).html() != "市局" && lindex == 1) {
          $("#org2").slideDown();
//          orgName = $(obj).html();
        /*    parentOrgName = orgName;*/
          parentOrgId = orgId;
          $.ajax({
              url: "<c:url value='/api/Org/orglist/'/>" + orgId,
              type: "get",
              dataType: "json",
              success: function (resp) {
                  if (resp && resp.succ) {
                      var _data = resp.data;
                      if (_data != null) {
                          var _length = _data.length;
                          var _html = "<li onclick=changeOrgId(" + orgId + ",this,2)>分局</li>";
                          for (var i = 0; i < _length; i++) {
                              var _item = _data[i];
                              _html += "<li onclick=changeOrgId('" + _item.guid + "',this,2)>" + _item.orgName + "</li>";
                          }
                          _html += "<li class='updown' onclick='toHide()'></li>";
                          $("#org2").html(_html);
                      } else {
                          $("#org2").html("<li onclick=changeOrgId(" + orgId + ",this,2)>分局</li><li class='updown' onclick='toHide()'></li>");
                      }
                  }
              }
          })
      } else if ($(obj).html() == "分局" && lindex == 2) {
          $("#org1").slideUp();
          $("#org2").slideUp();
          orgName = parentOrgName;
          $("#orgName").html(orgName.substring(0, 2) + "...");
          orgId = parentOrgId;
          $(".gslk > .act").removeClass("hov");
        loadMores(1, 0);
      } else if ($(obj).html() != "分局" && lindex == 2) {
          $("#org1").slideUp();
          $("#org2").slideUp();
          if ($(obj).html() == "分局") {
              orgId = _parentOrgId;
          } else {
              orgName = $(obj).html();
          }
          $("#orgName").html(orgName.substring(0, 2) + "...");
          $(".gslk > .act").removeClass("hov");
        loadMores(1, 0);
      }
      }

      function more(obj) {
          $(obj).html("加载中");
          currentPage++;
        loadMores(currentPage, 1);
      }

      function loadMores(page, isMore) {
          if (orgId == '') {
              orgId = '230600000000';
          }

          if (!page) {
              page = 1;
          }
          $.ajax({
              url: "<c:url value='/api/case/caselist'/>",
              type: "post",
              data: '{"keywords":"' + keywords + '","jz":"' + policeCatalogs + '","pageNum":' + page + ',"orgId":"' + orgId + '","caseType":"' + caseType + '"}',
              contentType: "application/json;charset=utf-8",
              dataType: "json",
              async: false,
              success: function (resp) {
                  if (resp && resp.succ) {
                      var _data = resp.data.list, _length = _data.length;
                      var _html = "";
                      for (var i = 0; i < _length; i++) {
                          var _item = _data[i];
                          var caseDetpName = _item.matDesc == null ? "" : _item.matDesc;
                          var expertneturl = _item.expertneturl == null ? "" : _item.expertneturl;
                          _html += "<li class='ui-border-t' onclick=gotoDetail('" + _item.caseNo + "','" + _item.orgId + "','" + expertneturl + "')><h4>" + caseDetpName + "</h4><p><span>" +
                              "<p><span>受理单位:" + _item.matName + "</span></p>";
                      }
                      if (isMore == 0) {
                          $("#content").html(_html);
                      } else {
                          $("#content").append(_html);
                      }
                      if (_data.length > 9) {
                          $("#pr_list_foot").css("display", "block");
                          $("#moreButton").html("加载更多");
                      } else {
                          $("#pr_list_foot").css("display", "none");
                      }
                  } else {
                      $("#content").html("<div style='text-align: center; height: 50px; line-height: 50px; '>未查询到结果</div>");
                      $("#pr_list_foot").css("display", "none");
                  }
              }
          });
      }

</script>

</html>